<template>
	<view class="expert">
		<titlebara img="@appstatic/community/explain-icon.png" mode="" :backToIndex="false" :back="true" text="达人认证"
			backgroundColor='#f5f5f5' @rightIconClick="toPageInstructions"></titlebara>

		<view class="top-box" :style="'padding-top:'+ navigationBarHeight" @click="toApplyRecord">
			<view class="t-text">本月剩余申请次数：<view class="color">{{applyCount}}</view>
			</view>
			<view class="t-btn">申请记录</view>
			<u-icon name="arrow-right" color="#ADB0AE" size="16"></u-icon>
		</view>

		<view class="list-box">
			<view :class="item.statusFlag == 2|| item.statusFlag == 7? 'items background': 'items'"
				v-for="(item, index) in dataList" :key='index'>
				<image class="item-img" :src="item.masterImg||'@appstatic/community/expert-header.png'"
					mode="aspectFill" />
				<view class="text-box">
					<view class="title">{{item.masterName}}</view>
					<view class="content">{{item.masterRemark}}</view>
					<!-- <u-parse :content="item.masterRemark" class="content"></u-parse> -->
					<block v-if="item.statusFlag == 2|| item.statusFlag == 7">
					<view class="date" v-if="item.expireTime">有效期至：{{item.expireTime}}</view>	
					<view class="date" v-else>有效期至：{{item.expireTime}}</view>
					</block>
					
				</view>
				<view class="operation-view">

					<!-- 0未申请 -->
					<image v-if='item.statusFlag == 0' class="once-img" src="@appstatic/my/orderHome/at-once.png"
						@click="beginApply(item)" />

					<!-- 1认证中 -->
					<image v-else-if='item.statusFlag == 1' class="ing-img" src="@appstatic/my/orderHome/during.png" />


					<!-- 2\7 已获得-->
					<view class="switch-box" v-else-if='item.statusFlag == 2||item.statusFlag == 7'>
						<view class="show-title" v-if='item.statusFlag == 7'>已展示</view>
						<view class="hidden-title" v-if='item.statusFlag == 2'>未展示</view>
						<u-switch v-model="item.statusFlag== 7" @change="change($event,item)" activeColor="#EA5404"
							inactiveColor="#ADB0AE" size="30">
						</u-switch>
					</view>
					<!-- 3未达标 -->
					<image v-else-if='item.statusFlag == 3' class="ing-img"
						src="@appstatic/my/orderHome/unqualified.png" />
					<!-- 敬请期待 -->
					<image v-else-if='item.statusFlag == 9' class="ing-img" src="@appstatic/my/orderHome/expect.png"
						style="width: 120rpx;" />

					<!--数据为空，自动设置未达标 -->
					<image v-else class="ing-img" src="@appstatic/my/orderHome/unqualified.png" />




				</view>

			</view>
		</view>


	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js");
	const dialog = require("@utils/dialog.js");
	import titlebara from '@components/titlebar/titlebar'
	export default {
		components: {
			titlebara
		},
		data() {
			return {
				value: true,
				windowHeight: 0,
				navigationBarHeight: app.globalData.statusBarHeight + 44 + 'px',
				dataList: [],
				applyCount: 0
			};
		},
		/*uniapp中只有页面 vue 里边有 onLoad，组件 vue里边生命周期都是标准 vue 的生命周期，*/
		onLoad: function(options) {
			this.getAllowApplyCount()
			this.getListAPP()
		},
		methods: {
			//立即申请
			beginApply: function(item) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_USERMASTER_BEGINAPPLY;
				var params = {
					id: item.id
				};
				network.post(uri, params, 'form').then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "达人认证中，请耐心等待",
							duration: 3000,
							icon: 'none'
						})
						this.getAllowApplyCount()
						this.getListAPP()
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			//查询本月剩余申请次数（APP）
			getAllowApplyCount: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_USERMASTER_GETALLOWAPPLYCOUNT;
				var params = {};
				network.get(uri, params, 'json').then(res => {
					if (res.code == 200) {
						that.applyCount = res.data
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			//查询达人认证首页列表
			getListAPP: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_USERMASTER_GETLISTAPP;
				var params = {};
				network.get(uri, params, 'json').then(res => {
					if (res.code == 200) {
						//课包状态
						that.dataList = res.data;
						// that.dataList[0].statusFlag = 7

					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			//对外展示
			beginShow:function(item){
				var that = this;
				var uri = app.globalData.config.interfaces.URL_USERMASTER_BEGINSHOW;
				var params = {
					id: item.id
				};
				network.post(uri, params, 'form').then(res => {
					if (res.code == 200) {
						this.getListAPP()
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			//取消对外展示
			endShow:function(item){
				var that = this;
				var uri = app.globalData.config.interfaces.URL_USERMASTER_ENDSHOW;
				var params = {
					id: item.id
				};
				network.post(uri, params, 'form').then(res => {
					if (res.code == 200) {
						this.getListAPP()
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			//展示达人认证标识
			change:function(e,item){
				if(e==false){
					// this.dataList[0].statusFlag = 2
					this.endShow(item)
				}else{
					// this.dataList[0].statusFlag = 7
					this.beginShow(item)
				}
			},
			//跳转认证申请
			toApplyRecord: function() {
				uni.navigateTo({
					url: '/module_my/pages/expertCertification/applyRecord'
				})
			},
			//跳转达人认证说明
			toPageInstructions: function() {
				uni.navigateTo({
					url: '/module_my/pages/expertCertification/expertInstructions'
				})
			}
		}


	}
</script>

<style lang='scss' scoped>
	.expert {
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		background: #EDEDED url(@appstatic/img/my/bg-img.jpg) no-repeat;
		background-position: 0 0;
		background-size: 100%;
		background-attachment: fixed;

		image {
			image-rendering: -moz-crisp-edges;
			image-rendering: -o-crisp-edges;
			image-rendering: -webkit-optimize-contrast;
			image-rendering: crisp-edges;
			-ms-interpolation-mode: nearest-neighbor;
		}

		.top-box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 32rpx;
			display: flex;
			padding-top: 88rpx;
			line-height: 80rpx;
			background-color: rgba(234, 84, 4, 0.2);
			font-size: 26rpx;
			color: #3D3A3A;

			.t-text {
				flex: 1;

				.color {
					display: inline-block;
					color: #EA5404;
				}
			}

			.t-btn {
				color: #ADB0AE;
				margin-right: 8rpx;
			}
		}

		.list-box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 32rpx;
			flex-direction: column;
			display: flex;


			.items {
				display: flex;
				width: 100%;
				box-sizing: border-box;

				padding: 48rpx 0rpx 32rpx;
				border-bottom: 2rpx solid #EDEDED;

				.item-img {
					width: 160rpx;
					height: 160rpx;
				}

				.text-box {
					width: 80px;
					flex: 1;
					box-sizing: border-box;
					padding: 0 20rpx;

					.title {
						font-weight: 700;
						font-size: 32rpx;
						line-height: 46rpx;
						color: #3D3A3A;
					}

					.content {
						width: 160px;
						font-size: 20rpx;
						line-height: 28rpx;
						color: #ADB0AE;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 4;
						overflow: hidden;
						margin-top: 8rpx;
					}

					.date {
						font-size: 20rpx;
						line-height: 28rpx;
						color: #ADB0AE;
						margin-top: 20rpx;
					}

				}

				.once-img {
					width: 154rpx;
					height: 56rpx;
				}

				.operation-view {
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.ing-img {
					width: 88rpx;
					height: 24rpx;
					align-items: center;
				}

				.switch-box {
					width: 120rpx;
					height: 64rpx;
					position: relative;
					font-size: 20rpx;
					color: #FFFFFF;

					.show-title {
						position: absolute;
						top: calc(50% - 10rpx);
						left: 2px;
						z-index: 99;
					}

					.hidden-title {
						position: absolute;
						top: calc(50% - 10rpx);
						right: -4px;
						z-index: 99;
					}
				}
			}

			.background {
				background-image: url('@appstatic/my/orderHome/have-bg.png');
				background-repeat: no-repeat;
				background-size: 196rpx 160rpx;
				background-position: 54.6vw 80rpx;
			}

		}
	}
</style>
